<template>
	<view class="content" :style="{width:width}">
		<view class="box" v-for="(item,index) in data" :key="index">
			<view class="left" v-if="item.type==0">

				<image src="../../static/aislogo.png"></image>
				<view class="con" style="">

					<text class="message_con1" selectable="true" space="nbsp">{{item.msg}}</text>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<text style="font-size: 26rpx;color: #888;margin-top: 7rpx;"
							@click="copyText(item.msg)">点击复制</text>
					</view>
				</view>
			</view>

			<view class="right" v-if="item.type==1">
				<text style="margin-right: 20rpx;" class="message_con2" selectable="true"
					space="nbsp">{{item.msg}}</text>
				<text class="copy" @click="copyText(item.msg)">点击复制</text>
			</view>

		</view>

		<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
			<zero-loading v-if="lodingShow" type="pulse" position="absolute"></zero-loading>
		</view>
		<view class="bottom" :style="{bottom:pdmHeight}">
			<textarea @keyboardheightchange="keyboardEvent" placeholder="请输入内容" :adjust-position="false"
				:show-confirm-bar="false" auto-height maxlength="-1" v-model="message_input" />

			<uni-icons style="margin-right: 10rpx;" v-if="!lodingShow" @click="submit" type="navigate-filled"
				color="#00aaff" size="45"></uni-icons>

			<uni-icons style="margin-right: 10rpx;" v-else type="navigate-filled" size="45"></uni-icons>

		</view>


	</view>
</template>

<script>
	import {
		EventSourcePolyfill
	} from 'event-source-polyfill';

	export default {
		data() {
			return {
				data: [{
					type: 0,
					msg: "GPT在线和你聊人生~"
				}],
				message_input: "",
				pdmHeight: 0,
				text: [],
				lodingShow: false,

				id: "",
				width:""
			}
		},
		onLoad() {
			this.id = this.randomNum(5);
			console.log(this.id)
			
			//判断是pc还是手机
			// #ifdef H5  
			if (navigator.userAgent.indexOf('Mobile') === -1) {
			    //pc
				this.width = "60vw"
			}else{
				//手机
				this.width = "100vw"
			}
			// #endif
			
		},
		onShow() {
			var that = this;
			window.onbeforeunload = function(e) {
				e = e || window.event;
				// For IE and Firefox prior to version 4
				if (e) {
					that.delete();
				}

			};
		},
		methods: {
			delete() {
				uni.request({
					url: uni.url + '/deleteMessage',
					data: {
						id: this.id
					}
				})
			},
			randomNum(n) {
				var res = "";
				for (var i = 0; i < n; i++) {
					res += Math.floor(Math.random() * 10);
				}
				return res;
			},
			refresherTop() {
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 999999,
						duration: 100,
					});
				})
			},
			keyboardEvent(e) {
				this.pdmHeight = e.detail.height + "px"

			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			submit() {
				var that = this


				if (this.message_input == "") {
					uni.showToast({
						title: "你想问什么？",
						icon: 'none'
					})
					return;
				}

				this.lodingShow = true

				var objw = {
					type: 1,
					msg: this.message_input
				}
				this.data.push(objw)

				var list = "";

				for (var item in this.text) {
					list += this.text[item].content
				}
				if (list.length > 3000) {
					var data = this.text
					this.text = [];
					this.text.push(data[data.length - 2])
					this.text.push(data[data.length - 1])
				}

				var one = {
					role: "user",
					content: this.message_input,
				}
				this.text.push(one);

				this.refresherTop();
				console.log(this.text)

				uni.request({
					url: uni.url + '/setMessage',
					method: 'POST',
					data: {
						id: this.id,
						messages: this.text
					},
					success: (res) => {

						let url = uni.url + `/getMessage?id=${this.id}`;
						var es = new EventSourcePolyfill(url, {});

						var index = 0;
						var text = ""
						es.onmessage = function(event) {
							var msgs = event.data;
							// console.log(msgs)
							if (msgs === "[DONE]") {
								es.close();
								console.log("回答完成")
								that.lodingShow = false;
								console.log(text)
								var one = {
									role: "assistant",
									content: text,
								}
								that.text.push(one);

							} else {
								try {
									
									var con = JSON.parse(msgs).choices[0].delta.content;
									if(con!=undefined){
										text += con;
									}
								} catch (error) {}

								if (index == 0) {
									var obj = {
										type: 0,
										msg: text
									}
									that.data.push(obj)
								} else {
									var obj = {
										type: 0,
										msg: text
									}
									that.data[that.data.length - 1] = obj
								}
							}

							that.$forceUpdate()
							index++;

						};

						es.onerror = function(e) {
							es.close();
							that.lodingShow = false;
						};


					},
					fail: (res) => {
						that.lodingShow = false;
					}
				})

				this.message_input = ""

			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: calc(100vh - 200rpx);
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 200rpx;

	}

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.left {
		display: flex;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.left image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 8px;
		margin-right: 25rpx;
		margin-left: 25rpx;
	}

	.con {
		display: flex;
		flex-direction: column;
	}

	.message_con1 {
		max-width: 500rpx;
		background-color: #FFF;
		border-radius: 5rpx;
		color: #888;
		font-size: 30rpx;
		padding: 16rpx;
		font-family: "微软雅黑";
		word-break: break-all; //英文
		white-space: pre-wrap; //中文
		box-shadow: 1rpx 1rpx 1rpx 2rpx #EEE;
	}

	.right {
		width: 100%;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.right image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 8px;
		margin-right: 25rpx;
		margin-left: 25rpx;
	}

	.message_con2 {
		max-width: 500rpx;
		background-color: #00aaff;
		border-radius: 5rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 16rpx;
		font-family: "微软雅黑";
		word-break: break-all; //英文
		white-space: pre-wrap; //中文
		box-shadow: 1rpx 1rpx 1rpx 1rpx #d4d4d4;
		margin-left: auto;
	}

	.copy {
		font-size: 26rpx;
		color: #888;
		margin-top: 7rpx;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.bottom {
		width: 90%;
		background-color: #FFF;
		position: fixed;
		bottom: 5prx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 100rpx;
		box-shadow: 0 10px 6px -6px rgba(30, 30, 30, 0.1), 12px 0 8px -8px rgba(50, 50, 50, 0.1);
		transition: all .2s ease-in-out;
		left: 5%;
		margin-bottom: 20rpx;
	}

	textarea {
		width: 90%;
		margin-top: 25rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		min-height: 50rpx;
		font-size: 27rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: 15rpx;
		padding-bottom: 10rpx;

	}

	.submit {
		width: 160rpx;
		font-size: 24rpx;
		height: 65rpx;
		background-color: #00aaff;
		color: #FFF;
		margin-right: 20rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
